<template>
  <view class="comment-box">
    <view
      v-for="(item, index) in detail.replies"
      class="comment-item"
      :key="index"
    >
      <view class="item-box">
        <view @click.stop="goUserInfo(item.author.loginname)">
          <u-avatar :src="item.author.avatar_url"></u-avatar>
        </view>
        <view class="comment-value">
          <view class="comment-name">
            {{ item.author.loginname }}
            <template
              v-if="userInfo && userInfo.loginname != item.author.loginname"
            >
              <u-icon
                v-if="item.is_uped"
                color="#2979ff"
                class="icon-live"
                size="40"
                name="heart-fill"
                @click="goodLiveFn(item)"
              />
              <u-icon
                v-else
                class="icon-live"
                size="40"
                name="heart"
                @click="goodLiveFn(item)"
              />
            </template>
          </view>
          <view class="comment-txt linefeed" v-html="item.content"></view>
        </view>
      </view>
      <view class="create-time">{{ dateFormat(item.create_at) }}</view>
    </view>
  </view>
</template>

<script>
import { goUserInfo } from "@/utils/jump.js";
import { dateFormat } from "@/utils/format.js";
import { mapState } from "vuex";
import { goodLive } from "@/api/detail.js";
export default {
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  data() {
    return {
      dateFormat,
      goUserInfo,
    };
  },
  methods: {
    goodLiveFn(item) {
      console.log(item);
      goodLive(item.id).then((res) => {
        console.log(res);
        item.is_uped = res.action === "up" ? true : false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.comment-box {
  .comment-item {
    border-bottom: 1px solid #eee;
    padding: 10rpx 0;
  }
  .item-box {
    display: flex;
    align-items: center;
    .comment-value {
      margin-left: 20rpx;
      flex: 1;
      .comment-name {
        font-size: 28rpx;
        font-weight: 700;
        .icon-live {
          float: right;
        }
      }
      .comment-txt {
        font-size: 24rpx;
      }
    }
  }
  .create-time {
    text-align: right;
    font-size: 24rpx;
    color: #ccc;
  }
}
</style>